const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {
              // 可以在这里自定义Ant Design Mobile的主题变量
              '@primary-color': '#1677ff',
            },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
  webpack: {
    configure: (webpackConfig) => {
      // 确保CSS Modules正确配置
      const cssRule = webpackConfig.module.rules.find(rule => 
        rule.oneOf && rule.oneOf.some(oneOf => 
          oneOf.test && oneOf.test.toString().includes('css')
        )
      );
      
      if (cssRule) {
        cssRule.oneOf.forEach(oneOf => {
          if (oneOf.test && oneOf.test.toString().includes('css')) {
            if (oneOf.use && oneOf.use[1] && oneOf.use[1].options) {
              // 确保CSS Modules配置正确
              if (oneOf.use[1].options.modules) {
                oneOf.use[1].options.modules = {
                  auto: true,
                  localIdentName: '[name]__[local]--[hash:base64:5]',
                };
              }
            }
          }
        });
      }
      
      return webpackConfig;
    },
  },
};
